// 导入初始化样式
@import 'base.less';

@mainColor: #fb7299;
@ratio: 3.75vw;

body {
    margin-top: (80/@ratio);
    margin-bottom: (45/@ratio);
}

// 头部
header {
    position: fixed;
    top: 0;
    right: 0;
    height: 22.4vw;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    border-bottom: 1px solid #ccc;

    .top_nav {
        height: (44/@ratio);
        display: flex;
        justify-content: space-between;
        padding: (10/@ratio);

        .left {
            width: (65/@ratio);

            a {
                .icon-bilibili1 {
                    color: #fb7299;
                    font-size: (30/@ratio);

                }
            }
        }

        .right {
            width: (170/@ratio);
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            a {
                &:nth-child(1) {
                    .icon-sousuo1 {
                        font-size: (24/@ratio);
                        color: #ccc;
                    }

                }

                &:nth-child(2) {
                    width: (24/@ratio);
                    height: (24/@ratio);

                }

                &:nth-child(3) {
                    width: (72/@ratio);
                }
            }
        }

    }

    nav {
        display: flex;
        height: (40/@ratio);
        justify-content: space-between;
        align-items: center;
        padding: (10/@ratio);


        ul {
            width: (290/@ratio);
            display: flex;
            justify-content: space-between;


            li {
                font-weight: 300;

                a {
                    padding-bottom: 7px;

                    &:hover {
                        color: #fb7299;
                        border-bottom: 2px solid #fb7299;
                    }
                }
            }

            .icon-chevron-down {
                color: #ccc;
            }




        }


    }
}

// 通栏盒子
.banner {
    width: 100%;


    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        li {
            width: (180/@ratio);
            height: (150/@ratio);
            font-size: (12/@ratio);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .pic {
                width: (172/@ratio);
                height: (97/@ratio);
                position: relative;

                .txt {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: (20/@ratio);
                    width: 100%;
                    display: flex;
                    color: #fff;
                    text-align: center;

                    span {

                        .icon-pinglun {
                            font-size: (14/@ratio);
                            font-weight: 800;
                        }

                    }
                }
            }

            span {
                // padding: 3px;
                width: (172/@ratio);
                /*超出的部分隐藏*/
                overflow: hidden;
                /*文字用省略号替代超出的部分*/
                text-overflow: ellipsis;
                /* 弹性伸缩盒子模型显示 */
                display: -webkit-box;
                /* 限制在一个块元素显示的文本的行数 */
                -webkit-line-clamp: 2;
                /* 设置或检索伸缩盒对象的子元素的排列方式  vertical垂直 */
                -webkit-box-orient: vertical;
            }
        }
    }
}

.footer {
    position: fixed;
    bottom: (10/@ratio);
    left: (12/@ratio);
    width: (350/@ratio);
    height: (40/@ratio);
    border-radius: (40/@ratio);
    background-color: #fb7299;
    text-align: center;
    line-height: (40/@ratio);
    color: #fff;

    a,
    .icon-bilibili1 {
        color: #fff;
    }
}